<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>project demo</title>
<link  rel="stylesheet" href="css/style.css"/>
<link rel="stylesheet" href="js/fancybox/jquery.fancybox.css"/>
<script  src="js/jquery-1.7.1.min.js"></script>
<script  src="js/jcarousel/jquery.infinitecarousel3.min.js"></script>
<script  src="js/jcarousel/easing.js"></script>
<script  src="js/fancybox/jquery.fancybox.js"></script>
<script  src="js/fancybox/jquery.mousewheel-3.0.6.pack.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script>
$(function(){
	$('#carousel').infiniteCarousel({
		imagePath: 'images/',
		transitionSpeed:450,
		displayTime: 6000,
		internalThumbnails: false,
		thumbnailType: 'images',
		customClass: 'myCarousel',
		progressRingColorOpacity: '0,0,0,.9',
		progressRingBackgroundOn: false,
		easeLeft: 'easeOutExpo',
		easeRight:'easeOutQuad',
		inView: 1,
		advance: 1,
		autoPilot: true,
		prevNextInternal: false,
		autoHideCaptions: false
	});
	//$('.box-fancybox').hide();
	$('.btn-fancy').fancybox();
	
});
</script>
<style>
div.ic_myCarousel {
	margin:0px auto 0 auto;
	clear:right;
}

.ic_myCarousel .ic_button {
	float: left;
	height:80px;
	line-height: 25px;
	margin: 0 4px 0 2px;
	width: 206px;
	border: 2px solid #eee;
	background: #ddd;
}
.infiniteCarousel {
	margin: 0 auto !important;
}
.ic_wrapper {
	width: 700px !important;
}
.ic_myCarousel .ic_active {
	background: #fff;
	border: 2px solid #800;
}
.ic_peek_padding {
	padding: 0 20px;
}
.ic_thumbnails{ padding-left:28px}
div p {
	clear: both;
	color: #333333;
	font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
	font-size: 18px;
	text-shadow: 0 1px 1px #C9C9C9;
}
.ic_right_nav{ top:270px !important; right:30px !important;}
.ic_left_nav{ top:270px !important; left:30px !important;}
.fancybox-inner{ overflow:hidden !important;}
</style>
</head>
<body>
<div id="pages">
	<header>
    	<div class="wrapper">
        	<div id="logo"></div>
            <nav>
            	<ul>
                	<li><a href="#">Home</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <div id="main"> 
    	<div class="wrapper">
            <div class="box-fancybox">
				<ul id="carousel">
					<li><iframe longdesc="http://img.youtube.com/vi/QQh56geU0X8/2.jpg" width="600" height="360" src="http://www.youtube.com/embed/QQh56geU0X8?rel=0&amp;hd=1" wmode="transparent" frameborder="0" allowfullscreen></iframe></li>
					<li><iframe longdesc="http://img.youtube.com/vi/X_uyuuJVlw4/2.jpg"  width="600" height="360" src="http://www.youtube.com/embed/X_uyuuJVlw4?rel=0" frameborder="0" allowfullscreen></iframe></li>
					<li><iframe longdesc="http://img.youtube.com/vi/mopar3ddxOM/2.jpg" width="600" height="360" src="http://www.youtube.com/embed/mopar3ddxOM?rel=0&amp;hd=1" frameborder="0" allowfullscreen></iframe></li>
					<li><iframe longdesc="http://img.youtube.com/vi/qrO4YZeyl0I/2.jpg" width="600" height="360" src="http://www.youtube.com/embed/qrO4YZeyl0I?rel=0" frameborder="0" allowfullscreen></iframe></li>
					<li><iframe longdesc="http://b.vimeocdn.com/ts/145/026/145026168_200.jpg" src="http://player.vimeo.com/video/22439234" width="640" height="360" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></li>
					<li><iframe src="http://www.funnyordie.com/embed/5ef1adb57b" longdesc="video.png" width="640" height="360" frameborder="0"></iframe></li>
				</ul>
            </div>
        <a href=".box-fancybox" class="btn-fancy">View detail</a>
        </div>
    </div>
    <footer>
        <div class="wrapper">
        	<section></section>
        </div>
    </footer>
</div>
</body>
</html>
